<template>
    <div>
       123
        <div class="box" v-show="visible">
<div class="mask" @click="cloneMask"></div>
<div class="dialog" :style="{width:width}">
        <div class="dialog-header">
        <i @click="del_dialog">X</i>
        </div>
        <div class="dialog-body">
            <slot name="content">
                弹出框
            </slot>
        </div>
        <div class="dialog-footer">
            <slot name="footer"> 
                 <button  @click="del_dialog">取消</button>
                 <button  @click="del_dialog">确定</button>
                
                </slot>   
    </div>
</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'my-Dialog',
        props: {
            title: {
                type: String,
                default: '默认标题1'
            },
            width: {
                type: String,
                default: '50%'
            },
            visible: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {

            };
        },
        computed: {

        },
        created() {

        },
        mounted() {

        },
        watch: {

        },
        methods: {
            cloneMask(){},
            del_dialog(){
                this.$emit('del_dialog',!this.visible)
            }
        },
        components: {

        },
    };
</script>

<style lang="scss" scoped >
    .box{
       .mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color:#111;
    opacity: 0.5;
    animation: mask1 1s linear forwards;   
   } 
    }
 .dialog{
    position: fixed;
    top: 30%;
    left: 20%;
    height: 50%;
    padding:10px;
    background-color:#fff;
  transform:tarnslate(-50%,-50%)
  
 }

.dialog-header{
    width:30px;
    height:30px;
    position:absolute;
    top:5px;
    right:5px;
}

  .dialog-footer{
    position:absolute;
    bottom:0px;
    right:0;
  }
  button{
        width: 80px;
        height: 40px;
        margin-right: 10px;
       
    }
</style>